<template>
  <f7-page
    name="toShare"
    color-theme="red"
    class="backgroundColor uploadAvatar_box"
  >
    <div class="navbarToShare">
      <div class="navbar_l" @click="$f7router.back()">
        <f7-button>
          <svg-icon iconClass="horn_down_white" v-if="getThemeDark" />
          <svg-icon iconClass="horn_down" v-else />
        </f7-button>
      </div>
      <div class="navbar_m">
        <div class="mText">
          <span class="titleColor">分享</span>
        </div>
      </div>
      <div class="navbar_r"></div>
    </div>
    <f7-block class="text_box">
      <f7-list-input
        type="textarea"
        placeholder="写下你想分享的内容吧..."
        :value="editorValue"
        @input="editorValue = $event.target.value"
        @focus="handleFoucus();"
        @blur="handleBlur()"
      >
        <div slot="label">
          <svg-icon iconClass="textarea_share_red" v-if="editorFocus" />
          <svg-icon iconClass="textarea_share_white" v-else-if="getThemeDark"/>
          <svg-icon iconClass="textarea_share" v-else/>
          
          <span id="sTitle"  v-if="editorFocus">分享到♪圈</span>
          <span id="sTitle" class="titleColor" v-else>分享到♪圈</span>
        </div>
      </f7-list-input>
    </f7-block>
    <f7-block>
      <v-sharedSong v-if="shareType==='song'" :songData="share" :from="'toShare'"/>
      <v-sharedSongList v-if="shareType==='songList'" :songList="share" :from="'toShare'"/>
    </f7-block>
    <f7-row
      style="margin:0.2rem 0.2rem;position:absolute;bottom:0;width:calc(100% - 0.4rem)"
    >
      <f7-col>
        <f7-button fill @click="handleSubmitBtnClick">分享到♪圈</f7-button>
      </f7-col>
    </f7-row>
  </f7-page>
</template>
<script>
import { mapGetters } from 'vuex'
import SharedSong from '@/components/sharedsong.vue'
import SharedSongList from '@/components/sharedsonglist.vue'
import { toShareSong, toShareSongList } from '@/api/share.js'
export default {
  components: {
    'v-sharedSong': SharedSong,
    'v-sharedSongList':SharedSongList,
  },
  computed: {
    ...mapGetters({
      getThemeDark: 'getThemeDark',
      getUserInfo: 'getUserInfo',
    }),
  },
  props: {
    shareType: {
      type: String,
    },
    share: {
      type: [Object, Array],
    },
  },
  watch:{
    share:{
      handler(newVal){
        console.log('share....',newVal)
      },
      immediate:true,
    }
  },
  data() {
    return {
      customButtons: {
        hr: {
          content: '&lt;hr&gt;',
          onClick(editor, buttonEl) {
            document.execCommand('insertHorizontalRule', false)
          },
        },
      },
      customValue: '<p>Lorem, ipsum dolor sit amet ...</p>',
      editorValue: '',
      editorFocus:0,
    }
  },
  methods: {
    handleSubmitBtnClick() {
      console.log('share the song')
      console.log(this.getUserInfo, this.share)

      if (this.shareType === 'song') {
        let shareQuery = {
          songId: this.share.songId,
          userId: this.getUserInfo.userid,
          songName: this.share.name,
          description: this.editorValue,
        }
        toShareSong(shareQuery)
          .then((res) => {
            if (res.code == 200) {
              this.$f7ready((f7) => {
                let toastTop = f7.toast.create({
                  text: '分享成功',
                  position: 'top',
                  closeTimeout: 1500,
                })
                toastTop.open()

                // f7.views.main.router.back()
                f7.views.main.router.navigate('/home/')
              })
            }
            else {
              this.$f7ready((f7) => {
                let toastTop = f7.toast.create({
                  text: '分享失败',
                  position: 'top',
                  closeTimeout: 1500,
                })
                toastTop.open()
              })
            }
          })
          .catch((e) => {
            console.log(e)
          })
      } else if (this.shareType === 'songList') {
        let shareQuery = {
          songListId: this.share[0].id,
          userId: this.getUserInfo.userid,
          songListName: this.share[0].name,
          description: this.editorValue,
        }
        toShareSongList(shareQuery)
          .then((res) => {
            if (res.code == 200) {
              this.$f7ready((f7) => {
                let toastTop = f7.toast.create({
                  text: '分享成功',
                  position: 'top',
                  closeTimeout: 1500,
                })
                toastTop.open()

                // f7.views.main.router.back()
                f7.views.main.router.navigate('/home/')
              })
            }
            else {
              this.$f7ready((f7) => {
                let toastTop = f7.toast.create({
                  text: '分享失败',
                  position: 'top',
                  closeTimeout: 1500,
                })
                toastTop.open()
              })
            }
          })
          .catch((e) => {
            console.log(e)
          })
      }
    },
    handleFoucus(){
      this.editorFocus = 1
    },
    handleBlur(){
      this.editorFocus = 0;
    }
  },
}
</script>

<style lang="scss" scoped>
.navbarToShare {
  display: flex;
  align-items: center;
  height: 9vh;
  .navbar_l {
    width: 12vw;
    .svg-icon {
      width: 0.4rem;
      height: 0.4rem;
    }
  }
  .navbar_m {
    flex: 1;
    width: 72vw;
    margin-left: 1vw;
    span {
      font-size: 18px;
      white-space: nowrap;
    }
    .mText {
      width: 72vw;
    }
  }
}
.light .text_box {
  $spanColor: #212121;
  /deep/ textarea {
    color: $spanColor;
  }
}
.dark .text_box {
  $spanColor: #ffffff;
  /deep/ textarea {
    color: $spanColor;
  }
}
.text_box {
  height: 30vh;
  position: relative;
  padding: 0;
  margin: 0.1rem 0.15rem;

  /deep/ .item-title.item-label {
    div {
      display: flex;
      align-items: center;
      margin-bottom: 0.1rem;
      .svg-icon {
        width: 0.2rem;
        margin-right: 0.1rem;
      }
      span {
        font-size: 18px;
      }
    }
  }
  /deep/ .item-input-wrap {
    width: 100%;
    textarea {
      width: 100%;
      height: 30vh;
    }
    textarea::-webkit-input-placeholder {
      color:#999999
    }
  }
}
</style>
